<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @page {
            /*width: 40mm; !* 设置打印页面的宽度为210mm *!*/
            /*height: 30mm; !* 设置打印页面的高度为297mm *!*/
            margin: 1mm; /* this affects the margin in the printer settings */
        }
    </style>
</head>
<body>
<script type="text/javascript" src="qrcode.js"></script>
<script src="./qrcode.js"></script>
<script src="./jquery-3.5.1.js"></script>
<script src="./jQuery.print.js"></script>
<div id="print-content" style="display: flex;flex-direction: column;flex-wrap: nowrap;">
    <div id="code" style="margin-left: 28px;"></div>
    <div style="display: flex;margin-top: 10px">
        <div style="font-size: 9px">测试档案名...</div>
        <div style="font-size: 9px;margin-left: 15px;">2024-02-06</div>
    </div>
</div>
<button id="print-btn" onclick="printThis()">打印</button>
<script>
    // new QRCode(document.getElementById("qrcode"), "https://github.com/davidshimjs/qrcodejs");
    var qrcode = new QRCode(document.getElementById("code"), {
        text: "ZXKJ:cce3e8b43f544132aa214ec8d90a4e4a",
        width: 70,
        height: 70,
        // colorDark : "#f60",
        // colorLight : "#ccc",
        correctLevel: 0 // 二维码结构复杂性 0~3
    });

    //从 canvas 提取图片 image 的处理方法
    function convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    function printThis(thisdiv) {
        // var mycanvas = document.getElementsByTagName('canvas')[0]
        // var img = convertCanvasToImage(mycanvas);
        // $("#imagQrDiv").append(img);//imagQrDiv表示你要插入的容器id


        //print打印时去掉页眉和页脚
        $("#print-content").print({
            globalStyles: true,//是否包含父文档的样式，默认为true
            mediaPrint: false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
            noPrintSelector: ".avoid-this",//不想打印的元素的jQuery选择器，默认为".no-print"
        });
    }
</script>
</body>
</html>

